<template>
  <!-- 学科管理 -->
  <div class='container'>
    <!-- 表格 -->
  <el-card class="box-card">
    <!-- :rules="rules"  -->
      <el-form :model="formdata" ref="form" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学科名称：" prop="name">
        <el-input v-model="formdata.name"></el-input>
        <el-button type="primary" @click="submitForm()">清除</el-button>
        <el-button @click="resetForm()" :loading="isLoading" >搜索</el-button>
         <el-button style=" float: right;" type="success" @click="hModify('add')">新增学科</el-button>
         <!-- 这个是弹层 -->
         <!--
           titleInfo 这个是传递过去的标题
            @subjectSubcomponent="Biography"
          -->
         <SubjectAdd ref="subtian"  :getformdeTails ="getformdeTails"  :subject="subject"></SubjectAdd>
      </el-form-item>
  </el-form>
  <!-- Steps 步骤条 -->
  <el-steps simple>
    <i class="el-icon-info boek"></i>
    数据一共{{counts}}条</el-steps>
  </el-card>
    <el-card class="box-card" v-loading = "isLoading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="120"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="120"></el-table-column>
          <el-table-column prop="username" label="创建者" width="140"></el-table-column>
          <el-table-column label="创建日期" width="140">
            <template slot-scope="scope">
              <span>{{scope.row.addDate  | parseTimeByString("{y}-{m}-{d}")}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示"  width="140">
            <template slot-scope="scope" @click="handleStatus(scope.row)">
               <el-button type="text" v-if="scope.row.isFrontDisplay == true">显示</el-button>
               <el-button type="text" v-else>隐藏</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"  width="100"></el-table-column>
          <el-table-column prop=" tags" label="标签"  width="120">
             <template slot-scope="scope">
              <span>{{scope.row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="题目数量"  width="140"></el-table-column>
          <el-table-column label="操作"  width="260" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="hsubjectClassification(scope.row)">学科分类</el-button>
              <el-button type="text" size="mini" @click="hsubjectLabel(scope.row)">学科标签</el-button>
              <el-button type="text" size="mini" @click="hModify(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="hremove(scope.row.id)" >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
    style="margin-top:20px"
      @current-change="hpageJump"
      :current-page="subjectPassing.page"
      background
      layout="prev, pager, next"
      :total="counts">
    </el-pagination>
</el-card>
  </div>
</template>

<script>
import SubjectAdd from './../components/subjects-add'
import { list, remove } from '@/api/hmmm/subjects'
export default {
  name: 'subjects',
  components: {
    SubjectAdd
  },
  data () {
    return {
      // 校验搜索输入框
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
          // { pattern: /^\d{7}$/, message: '你输入的字过多了', trigger: 'change' }
        ]
      },
      isLoading: false, // 在点击查询时，产生加载中的交互效果
      // subject
      subject: {
        id: '',
        subjectID: '',
        subjectName: '',
        isFrontDisplay: false
      },
      formdata: {},
      subjectPassing: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // 总的列表
      tableData: [],
      // 总的数量
      counts: 0
    }
  },
  created () {
    this.getformdeTails()
  },
  methods: {
    // 学科分类
    hsubjectClassification (row) {
      // this.$router.push(`directorys/:${row.id}/:${row.subjectName}`)
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 学科分类
    hsubjectLabel (row) {
      // this.$router.push(`directorys/:${row.id}/:${row.subjectName}`)
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 删除按钮
    async hremove (idx) {
      this.$confirm('你确定要删除码？', { type: 'warning' })
        .then(async () => {
          const res = await remove({ id: idx })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getformdeTails()
          console.log(res)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // // 这是子组件传过来的
    // Biography () {
    //   this.getformdeTails()
    // },
    //
    hModify (row) {
      console.log(row)
      this.subject = {
        id: row.id,
        subjectName: row.subjectName,
        // !!   这个可以转换成bool
        isFrontDisplay: !!row.isFrontDisplay
      }
      this.$refs.subtian.show()
    },
    // 搜索按钮开始
    resetForm () {
      try {
        this.subjectPassing.page = 1
        this.subjectPassing.subjectName = this.formdata.name
        // 重新渲染
        this.getformdeTails()
      } catch (error) {
        this.$message.error('查询失败')
      }
    },
    // 清除from中的内容
    submitForm () {
      this.formdata.name = ''
      // 返回第一页
      this.subjectPassing.page = 1
      // 赋给名称空的值
      this.subjectPassing.subjectName = ''
      // 重新渲染
      this.getformdeTails()
    },
    // 这个是页面跳转 hpageJump
    hpageJump (num) {
      // console.log(num)
      this.subjectPassing.page = num
      // 重新渲染
      this.getformdeTails()
    },
    // 表单详情数据加载  getformdeTails
    async  getformdeTails () {
      this.isLoading = true
      try {
        const res = await list(this.subjectPassing)
        console.log(res)
        // 赋值给tableData
        this.tableData = res.data.items
        // 总的数量
        this.counts = res.data.counts
        this.isLoading = false
      } catch (error) {
        this.isLoading = false
        this.$message.error('读取失败')
      }
    }
  }
}
</script>

<style scoped>
.box-card{
  margin-top: 6px;
}
.el-input{
  width: 18%;
  margin-right: 20px;
}
.el-steps--simple{
  padding: 13px;
  background-color: #f4f4f5;
    color: #909399;
    font-size:14px;
}
.boek{
 padding-right: 10px;
}
</style>
